<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" label-width="80px">
      <el-row  :gutter="15">
        <el-col :span="16">
            <el-form-item label="解除原因" prop="relieveCause"
                :rules="[
                 ]">
          <el-input type="textarea" rows="10" v-model="inputForm.relieveCause" placeholder="请填写解除原因(非必填)"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="8">
          <div class="uni-preset">预设解除原因<span v-if="hasPermission('lora:alarm:jfLoraAlarm:preset')" @click="$refs.jfLoraAlarmPreset.init()">编辑</span></div>
          <ul class="infinite-list" style="overflow:auto">
            <li v-for="msg in presetList" class="infinite-list-item uni-ellipsis" @click="presetClick(msg)">
              <!-- <el-tooltip effect="dark" :content="msg" placement="top"> -->
                <div class="uni-ellipsis"> {{msg}}</div>
              <!-- </el-tooltip> -->
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="doSubmit()" v-noMoreClick>确定处理</el-button>
    </span>
  </el-dialog>
  <JfLoraAlarmPreset ref="jfLoraAlarmPreset" @refreshPresetList="refreshPresetList"></JfLoraAlarmPreset>
</div>
</template>

<script>
  import JfLoraAlarmPreset from './JfLoraAlarmPreset.vue'
  export default {
    data () {
      return {
        title: '处理报警',
        visible: false,
        loading: false,
        presetList: [],
        inputForm: {
          ids: '',
          relieveCause: ''
        }
      }
    },
    components: {
      JfLoraAlarmPreset
    },
    methods: {
      init (ids) {
        this.inputForm.ids = ids
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
        })
        
        this.$http({
          url: '/smis/config/jfConfig/queryByKey',
          method: 'post',
          params: {
            'keyStr': "presetConfig"
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            for(var key in (data.data||{})) {
              if(this.$data.hasOwnProperty(key)) {
                this.$data[key] = data.data[key]
              }
            }
          }
        })
      },
      presetClick(msg) {
        this.inputForm.relieveCause = msg
      },
      refreshPresetList(list) {
        this.presetList = list;
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/lora/alarm/jfLoraAlarm/relieveCause`,
              method: 'post',
              params: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
<style scoped="">
.infinite-list {
  width: 100%;
  height: 200px;
  font-size: 12px;
  line-height: 20px;
  color: #777777;
}
.uni-preset {
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 5px;
}
.uni-preset span {
  color: #409EFF;
  padding: 0 10px;
}
</style>
